<!DOCTYPE html>
<html style="border: 1px solid red;">
	<!-- 块元内容-->
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 内部样式表*/
			div,
			span {
				/* 标签选择器 */
				border: 1px solid blue;
				margin: 5px 10px;
				padding: 3px 6px;
				width: 600px;
				/* 只对div有效，对span无效 */
			}

			.greenBackground {
				/* 类选择器 */
				background-color: green;
				color: white;
			}

			div {
				width: 300px;
				/* 内部内容宽度，会覆盖之前的width */
				height: 50px;
				background-color: gray;
			}
			
			#p1 {
				/* id选择器 */
				background-color: blue;
			}
		</style>
	</head>
	<body style="border: 1px solid red;">
		<div class="greenBackground">
			这个是div1的内容
		</div>
		<div>
			这个是div2的内容
		</div>
		<span>这个地方是span的内容</span>
		<span> 这个地方是span的内容</span>

		<p id="p1" class="greenBackground">这个是一个段落1</p>
		<p id="p2" class="greenBackground">这个是一个段落2</p>

		<!-- <div style="border:1px solid green;margin-top:2px;margin-bottom:4px;width:150px;">
			这个是div的内容
		</div>	
		<!-- 行内式样内容-->
		<!-- 块元-->
		<!-- <span style="display:inline;border: 1px solid red;width: 200px;height: 500px;">这个地方是span的内容</span>
		<br />
		<span  style="display:inline-block;border: 1px solid red;width: 200px;height: 500px;"> 这个地方 是span的内容</span>-->
	</body>
</html>
